<template>
  <div id="main3" style="width: 100%; height: 100%;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'Echart3',
    mounted() {
      // this.initChart();
      // this.getSystemInfo();
    },
    methods: {
      getSystemInfo() {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-type`,
        }).then((res) => {
          if (res.data.code == 0) {
            const array = []
            res.data.data.forEach((item) => {
              array.push({ value: item.num, name: item.algorithm })
            })
            that.initChart(array);
          }
        }).catch((error) => {
        });
      },
      initChart(data) {
        const chartDom = document.getElementById('main3');
        const myChart = echarts.init(chartDom);
        const screenWidth = window.innerWidth;
        let centerPosition = ['28%', '55%'];
        let legendRight = '1%';
        if (screenWidth >= 2560) {
          // 小屏幕设备，调整饼图更靠左、图例更紧凑
          centerPosition = ['35%', '55%'];
          legendRight = '5%';
        }

        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function({ data }) {
              return `${data.name}（${data.value ? data.value : 0}次）`;
            }
          },
          legend: {
            right: legendRight,  // 改为右侧
            top: 'center', // 垂直居中
            orient: 'vertical', // 垂直排列
            textStyle: {
              color: '#fff' // 文字颜色设为白色
            },
            formatter: function(name) {
              const item = data.find(d => d.name === name);
              return `${name}（${item ? item.value : 0}次）`;
            }
          },
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          series: [
            {
              type: 'pie',
              radius: ['35%', '55%'],
              center: centerPosition,
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#002066',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false
                },
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        };

        option && myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      }
    }
  }
</script>
